<template>
	<view class="wrapper">
		<view class="header">
			<view class="navigate">
				<view class="left">
					<uni-icons type="left" size="27" color="#000" @click="navback"></uni-icons>
				</view>
				<view class="center">
					<view class="leftaction"></view>
					<view class="title">智信证券</view>
					<view class="rightaction"></view>
				</view>
				<view class="right">
					<uni-icons type="search" size="25" color="#000"></uni-icons>
				</view>
			</view>
			<view class="info">
				<view class="centerinfo">
					<view class="left">
						<view class="title">5.96</view>
						<view class="infoother">-0.06</view>
						<view class="infoother">-1.00%</view>
					</view>
					<view class="right">
						<image src="../../static/comm/tong.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
					</view>
				</view>
				<view class="otherinfo">
					<view class="infodetail">
						<view class="label">今开</view>
						<view class="value">6.00</view>
					</view>
					<view class="infodetail">
						<view class="label">最高</view>
						<view class="value">6.00</view>
					</view>
					<view class="infodetail">
						<view class="label">成交量</view>
						<view class="value">24.28万</view>
					</view>
				</view>
				<view class="otherinfo">
					<view class="infodetail">
						<view class="label">量比</view>
						<view class="value">6.00</view>
					</view>
					<view class="infodetail">
						<view class="label">最低</view>
						<view class="value">6.00</view>
					</view>
					<view class="infodetail">
						<view class="label">成交额</view>
						<view class="value">1.46亿</view>
					</view>
				</view>
				<view class="otherinfo">
					<view class="infodetail">
						<view class="label">换手</view>
						<view class="value">0.59%</view>
					</view>
					<view class="infodetail">
						<view class="label">市盈（TTM）</view>
						<view class="value">33.02</view>
					</view>
					<view class="infodetail">
						<view class="label">总市值</view>
						<view class="value">266.39亿</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kline">
			<view class="type flexs">
				<view class="left flexs">
					<view class="type-li">五日</view>
					<view class="type-li active">分时</view>
					<view class="type-li">日K</view>
					<view class="type-li">周K</view>
					<view class="type-li">月K</view>
				</view>
				<view class="right">
					<image src="../../static/index/securitiesdetails/setting.png" mode=""
						style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
			<view class="line-one">
				<view class="left">
					<view class="value1 flexs">
						<view class="value-info orangetext">均价 6.01</view>
						<view class="value-info redtext">涨停：6.62</view>
						<view class="value-info greentext">跌停：5.42</view>
					</view>
					<view class="value2">
						<!-- <image src="../../static/index/securitiesdetails/line1.png" mode="" style="width: 446rpx;"></image> -->

					<!-- 	<qiun-data-charts type="scatter" :chartData="chartData" style="width: 446rpx; " /> -->
					<ui-echarts ref="chart" :option="option" exportBase64></ui-echarts>

					</view>
				</view>
				<view class="right">
					<view class="thead flexs">
						<view>五档</view>
						<view>分价</view>
					</view>
					<view class="tbody">
						<view class="tr flexs" v-for="(item,index) of 5" :key="index">
							<view class="label graytext">卖5</view>
							<view class="label greentext">6.00</view>
							<view class="label">475</view>
						</view>
						<view class="line-img" style="height: 5rpx;">
							<image src="../../static/index/securitiesdetails/line3.png" mode=""
								style="width: 221rpx;height: 5rpx;"></image>
						</view>
						<view class="tr flexs" v-for="(item,index) of 5" :key="item">
							<view class="label graytext">卖5</view>
							<view class="label greentext">6.00</view>
							<view class="label">475</view>
						</view>
						<view class="tbottom">分时成交<uni-icons type="up" size="10" color="#999 "></uni-icons></view>
					</view>
				</view>
			</view>
			<view class="line-two">
				<view class="left">
					<view class="tcenter">
						<view class="center-value1">成交量<uni-icons type="down" size="15" color="#999 "></uni-icons>
						</view>
						<view class="center-value2">量：4979</view>
						<view class="center-value3 orangetext">额：269.75万</view>
					</view>
					<ui-echarts ref="chart" :option="options" exportBase64></ui-echarts>
				</view>
				<view class="right">
					<view class="tbody">
						<view class="tr flexs" v-for="(item,index) of 7" :key="index">
							<view class="label graytext">卖5</view>
							<view class="label greentext">6.00</view>
							<view class="label redtext">475</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kinfo">
			<view class="kinfo-wrapper">
				<view class="kinfo-value">
					<view class="label">涨停</view>
					<view class="text redtext">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">跌停</view>
					<view class="text greentext">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">成交额</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">量比</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">外盘</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">内盘</view>
					<view class="text">6.62</view>
				</view>
			</view>
			<view class="kinfo-wrapper">
				<view class="kinfo-value ">
					<view class="label">市盈(动)</view>
					<view class="text redtext">6.62</view>
				</view>
				<view class="kinfo-value ">
					<view class="label">市盈(静)</view>
					<view class="text greentext">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">每股净资产</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">市净率</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">总股本</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">总市值</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">流通股本</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">流通市值</view>
					<view class="text">6.62</view>
				</view>
				<view class="kinfo-value">
					<view class="label">收益(三)</view>
					<view class="text">6.62</view>
				</view>
			</view>
		</view>
		<view class="ban">
			<view class="title flexs">
				<view class="left">所属板块</view>
				<view class="right graytext">更多<uni-icons type="right" size="15" color="#999 "></uni-icons></view>
			</view>
			<view class="list-wrapper">
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
				<view class="list-li">
					<view>券商类</view>
					<view class="greentext">-1.24%</view>
				</view>
			</view>
		</view>
		<view class="tu">
			<view class="round">
				<view class="info info1">
					<view class="title">
						<view class="round-icon blue"></view>
						<view class="text">主力流出</view>
					</view>
					<view class="title2">9.2%</view>
					<view class="title3">2673.10万元</view>
				</view>
				<view class="info info2">
					<view class="title">
						<view class="round-icon blue"></view>
						<view class="text">主力流出</view>
					</view>
					<view class="title2">9.2%</view>
					<view class="title3">2673.10万元</view>
				</view>
				<view class="info info3">
					<view class="title">
						<view class="round-icon blue"></view>
						<view class="text">主力流出</view>
					</view>
					<view class="title2">9.2%</view>
					<view class="title3">2673.10万元</view>
				</view>
				<view class="info info4">
					<view class="title">
						<view class="round-icon blue"></view>
						<view class="text">主力流出</view>
					</view>
					<view class="title2">9.2%</view>
					<view class="title3">2673.10万元</view>
				</view>
				<view class="round-center">
		      		<ui-echarts ref="chart" :option="optiona" exportBase64 style="width: 300rpx; height: 300rpx; float: left; margin-top: -200rpx;"></ui-echarts>
				</view>
			</view>
			<view class="line-data">
				<view class="title flexs">
					<view class="left">最近5日主力净流入</view>
					<view class="right graytext">单位（万元）</view>
				</view>
				<view class="line-data-info">
					<ui-echarts ref="chart" :option="optionb" exportBase64></ui-echarts>
				</view>
			</view>
		</view>
		<view class="tips">市场有风险，投资需谨慎。本栏目信息来源于公开信息或第三方，如有 错漏，以官方披露信息为准，不构成任何投资建议。投资者应自主决 </view>
		<view class="action">
			<view class="left">
				<view class="value1">
					<text>8212.84</text>
					<uni-icons type="up" size="15" color="#999 "></uni-icons>
				</view>
				<view class="value2">
					<text class="greentext">-1.95%</text>
					<text class="graytext">深证成指</text>
				</view>
			</view>
			<view class="right">
				<view class="aciton-btn" @tap="actionshowstatus">
					<image src="../../static/index/securitiesdetails/icon1.png" mode=""
						style="width: 28rpx;height: 28rpx;"></image>
					<view>交易</view>
				</view>
				<view class="aciton-btn">
					<image src="../../static/index/securitiesdetails/icon2.png" mode=""
						style="width: 28rpx;height: 28rpx;"></image>
					<view>加入自选</view>
				</view>
			</view>
		</view>
		<view class="selling" v-show="actionpay" @tap="actionpay = false">
			<view class="top">
				<view class="left flexs">
					<uni-icons type="left" size="15" color="#999 "></uni-icons>
					<view class="zhanghu ">
						<text>账户：67***488</text>
						<uni-icons type="down" size="15" color="#999 "></uni-icons>
					</view>
					<view class="actiontype">
						<text>限价委托</text>
						<uni-icons type="down" size="15" color="#999 "></uni-icons>
					</view>
				</view>
				<view class="right">
					<uni-icons type="close" size="15" color="#999 "></uni-icons>
				</view>
			</view>
			<view class="number-wrapper">
				<view class="input">
					<view class="left">
						<numSelect model="4" size="85" color="#08377D"></numSelect>
					</view>
					<view class="right">
						<view class="numberthis">涨停：<text>6.62</text></view>
						<view class="numberthis">跌停：<text>5.42</text></view>
					</view>
				</view>
				<view class="input">
					<view class="left">
						<numSelect model="4" size="85" color="#08377D"></numSelect>
					</view>
					<view class="right">
						<view class="numberthis">涨停：<text>6.62</text></view>
						<view class="numberthis">跌停：<text>5.42</text></view>
					</view>
				</view>
			</view>
			<view class="typenum">
				<view class="numinfo">1/4仓</view>
				<view class="numinfo">1/3仓</view>
				<view class="numinfo">1/2仓</view>
				<view class="numinfo">全仓</view>
			</view>
			<view class="btn">卖出</view>
		</view>
		<view class="selling" v-show="actionbuy">
			<view class="top">
				<view class="left flexs">
					<uni-icons type="left" size="15" color="#999 "></uni-icons>
					<view class="zhanghu ">
						<text>账户：67***488</text>
						<uni-icons type="down" size="15" color="#999 "></uni-icons>
					</view>
					<view class="actiontype">
						<text>限价委托</text>
						<uni-icons type="down" size="15" color="#999 "></uni-icons>
					</view>
				</view>
				<view class="right" @tap="actionbuy = false">
					<uni-icons type="close" size="15" color="#999 "></uni-icons>
				</view>
			</view>
			<view class="number-wrapper">
				<view class="input">
					<view class="left">
						<numSelect model="4" size="85" color="#EA0E00"></numSelect>
					</view>
					<view class="right">
						<view class="numberthis">涨停：<text>6.62</text></view>
						<view class="numberthis">跌停：<text>5.42</text></view>
					</view>
				</view>
				<view class="input">
					<view class="left">
						<numSelect model="4" size="85" color="#EA0E00"></numSelect>
					</view>
					<view class="right">
						<view class="numberthis">涨停：<text>6.62</text></view>
						<view class="numberthis">跌停：<text>5.42</text></view>
					</view>
				</view>
			</view>
			<view class="typenum">
				<view class="numinfo">1/4仓</view>
				<view class="numinfo">1/3仓</view>
				<view class="numinfo">1/2仓</view>
				<view class="numinfo">全仓</view>
			</view>
			<view class="btn" style="background: #EA0E00;">卖出</view>
		</view>
		<view class="jiaoyi-action" v-show="actionshow">
			<view class="title">
				<view class="left">
					<view class="left-type-li">普通交易</view>
				</view>
				<view class="right" @tap="actionshow = false">
					<uni-icons type="close" size="15" color="#999 "></uni-icons>
				</view>
			</view>
			<view class="action-type">
				<view class="action-type-wrapper" @tap="actionbuystatus">
					<view class="action-type-li action-type-li1">买</view>
					<view class="action-type-title">闪电买入</view>
				</view>
				<view class="action-type-wrapper" @tap="actionpaystatus">
					<view class="action-type-li action-type-li2">卖</view>
					<view class="action-type-title">闪电卖出</view>
				</view>
				<view class="action-type-wrapper">
					<view class="action-type-li action-type-li3">撤</view>
					<view class="action-type-title">撤单</view>
				</view>
				<view class="action-type-wrapper">
					<view class="action-type-li action-type-li4">持</view>
					<view class="action-type-title">查看持仓</view>
				</view>
			</view>
			<view class="aciton-btn">去交易下单</view>
		</view>
	</view>
</template>

<script>
	import numSelect from '../../components/poiuy-numSelect/numSelect';
	import echarts from '../../static/h5/echarts.min.js'
	
	export default {
		components: {
			numSelect
		},
		data() {
			return {
				actionshow: false,
				actionbuy: false,
				actionpay: false,
				chartData: {},
				 option: {},
				  optiona: {},
				   optionb: {},
				  options: {},
				  
			}
		},
		 onReady() {
			 this.tubiao()
			 this.tubiaoa()
			 this.bingtu()
			 this.litu()
		    },
		onLoad() {
			
		},
		methods: {
			litu(){
				this.optionb = {
				 
				  tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      type: 'shadow'
				    },
				    formatter: function (params) {
				      let tar;
				      if (params[1] && params[1].value !== '-') {
				        tar = params[1];
				      } else {
				        tar = params[2];
				      }
				      return tar && tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
				    }
				  },
				
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  xAxis: {
				    type: 'category',
				    data: (function () {
				      let list = [];
				      for (let i = 1; i <= 11; i++) {
				        list.push('Nov ' + i);
				      }
				      return list;
				    })()
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				    
				      type: 'bar',
				      stack: 'Total',
				      silent: true,
				      itemStyle: {
				        borderColor: 'transparent',
				        color: 'transparent'
				      },
				      emphasis: {
				        itemStyle: {
				          borderColor: 'transparent',
				          color: 'transparent'
				        }
				      },
				      data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
				    },
				    {
				     
				      type: 'bar',
				      stack: 'Total',
				      label: {
				        show: true,
				        position: 'top'
				      },
				      data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
				    },
				    {
				  
				      type: 'bar',
				      stack: 'Total',
				      label: {
				        show: true,
				        position: 'bottom'
				      },
				      data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
				    }
				  ]
				};
			},
			bingtu(){
				this.optiona = {
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
				    top: '5%',
				    left: 'center'
				  },
				  series: [
				    {
				      name: 'Access From',
				      type: 'pie',
				      radius: ['40%', '70%'],
				      avoidLabelOverlap: false,
				     
				      emphasis: {
				        label: {
				        
				          fontSize: 40,
				          fontWeight: 'bold'
				        }
				      },
				      labelLine: {
				        show: false
				      },
				      data: [
				        { value: 1048,  },
				        { value: 735,  },
				        { value: 580,  },
				        { value: 484,},
				        { value: 300, }
				      ]
				    }
				  ]
				};
			},
			tubiaoa(){
				this.options = {
				  legend: {},
				  tooltip: {},
				  dataset: {
				    dimensions: ['product', '2015', '2016', '2017'],
				    source: [
				      { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
				      { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
				      { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
				      { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
				    ]
				  },
				  xAxis: { type: 'category' },
				  yAxis: {},
				  // Declare several bar series, each will be mapped
				  // to a column of dataset.source by default.
				  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
				};
			},
			tubiao(){
				let base = +new Date(1968, 9, 3);
				let oneDay = 24 * 3600 * 1000;
				let date = [];
				let data = [Math.random() * 300];
				for (let i = 1; i < 20000; i++) {
				  var now = new Date((base += oneDay));
				  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
				  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
				}
							
				   this.option =  {
				  tooltip: {
				    trigger: 'axis',
				    position: function (pt) {
				      return [pt[0], '10%'];
				    }
				  },
				
				 
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: date
				  },
				  yAxis: {
				    type: 'value',
				    boundaryGap: [0, '100%']
				  },
				  dataZoom: [
				    {
				      type: 'inside',
				      start: 0,
				      end: 10
				    },
				    {
				      start: 0,
				      end: 10
				    }
				  ],
				  series: [
				    {
				      name: 'Fake Data',
				      type: 'line',
				      symbol: 'none',
				      sampling: 'lttb',
				      itemStyle: {
				        color: 'rgb(255, 70, 131)'
				      },
				      areaStyle: {
				        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				          {
				            offset: 0,
				            color: 'rgb(255, 158, 68)'
				          },
				          {
				            offset: 1,
				            color: 'rgb(255, 70, 131)'
				          }
				        ])
				      },
				      data: data
				    }
				  ]
				};
			},
			actionshowstatus() {
				this.actionshow = true
				this.actionbuy = false
				this.actionpay = false
			},
			actionbuystatus() {
				this.actionshow = false
				this.actionbuy = true
				this.actionpay = false
			},
			actionpaystatus() {
				this.actionshow = false
				this.actionbuy = false
				this.actionpay = true
			}
		}
	}
</script>
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F6F4F9;
	}

	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		height: 380rpx;
		background-color: #fff;

		.navigate {
			color: rgb(0, 0, 0);
			height: 44px;
			height: calc(44px + constant(safe-area-inset-top));
			height: calc(44px + env(safe-area-inset-top));
			padding: 7px 3px;
			padding-top: calc(7px + constant(safe-area-inset-top));
			padding-top: calc(7px + env(safe-area-inset-top));
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			align-items: center;
			overflow: hidden;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			box-sizing: border-box;
			z-index: 998;
			-webkit-transition-property: all;
			transition-property: all;

			.left {
				font-weight: 500;
				margin: 0 4rpx;
			}

			.center {
				width: 548rpx;
				text-align: center;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20rpx;
				font-size: 28rpx;
				color: #262626;

				.leftaction {
					position: relative;
					width: 0;
					height: 0;
					border-top: 8rpx solid transparent;
					border-bottom: 8rpx solid transparent;
					border-right: 9rpx solid #999;
					/* 这里设置箭头的宽度 */
				}

				.rightaction {
					position: relative;
					width: 0;
					height: 0;
					border-top: 8rpx solid transparent;
					border-bottom: 8rpx solid transparent;
					border-left: 9rpx solid #999;
					/* 这里设置箭头的宽度 */
				}
			}

			.right {
				margin-right: 30rpx;
			}
		}

		.info {
			padding: 0 33rpx;

			.centerinfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 50rpx;

					.title {
						font-weight: bold;
						font-size: 48rpx;
						color: #20A10C;
					}

					.infoother {
						font-weight: bold;
						font-size: 28rpx;
						color: #20A10C;
					}
				}
			}

			.otherinfo {
				display: flex;
				justify-content: space-between;

				.infodetail {
					padding: 12rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 50rpx;

					.label {
						font-size: 24rpx;
						color: #999999;
					}

					.value {
						font-weight: bold;
						font-size: 24rpx;
						color: #000;
					}
				}
			}
		}
	}

	.kline {
		margin-top: 24rpx;
		padding: 0 33rpx;
		background: #fff;

		.type {
			height: 87rpx;

			.left {
				gap: 40rpx;

				.type-li {
					height: 46rpx;
					position: relative;
				}

				.active::after {
					content: '';
					width: 28rpx;
					height: 3rpx;
					background: #08377D;
					border-radius: 2rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -14rpx;
				}
			}
		}

		.line-one {
			display: flex;
			justify-content: space-between;

			.left {
				.value1 {
					height: 40rpx;
					line-height: 40rpx;
					font-weight: bold;
					font-size: 20rpx;
				}
			}

			.right {
				.thead {
					background: #F6F6F6;
					border: 1px solid #E5E5E5;
					font-weight: bold;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;

					view {
						width: 50%;
						text-align: center;
					}
				}

				.tbody {
					padding: 10rpx 0;
					font-weight: 500;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #000;

					.line-img {
						display: flex;
						align-items: center;
						margin: 10rpx auto;
					}
				}

				.tbottom {
					height: 42rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #999999;
					margin-top: 12rpx;
				}
			}
		}

		.line-two {
			display: flex;
			justify-content: space-between;

			.left {
				.tcenter {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 52rpx;
					font-weight: bold;
					font-size: 20rpx;

					.center-value1 {
						width: 98rpx;
						height: 28rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
					}
				}
			}

			.right {
				width: 221rpx;

				.tbody {
					padding: 10rpx 0;
					font-weight: 500;
					font-size: 24rpx;
					line-height: 39rpx;
				}
			}
		}
	}

	.kinfo {
		margin-top: 24rpx;
		padding: 0 33rpx;
		background: #fff;

		.kinfo-wrapper {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 20rpx 0;

			.kinfo-value {
				width: 47%;
				display: flex;
				justify-content: space-between;
				line-height: 51rpx;

				.label {
					font-size: 28rpx;
					color: #999999;
				}

				.text {
					font-weight: bold;
					font-size: 28rpx;
					color: #262626;
				}
			}
		}

		.kinfo-wrapper:first-child {
			border-bottom: 1rpx solid #E5E5E5;
		}
	}

	.ban {
		margin-top: 24rpx;
		padding: 0 33rpx;
		background: #fff;

		.title {
			height: 82rpx;
			border-bottom: 1rpx solid #E5E5E5;
			font-weight: bold;
			font-size: 28rpx;
			color: #262626;
		}

		.list-wrapper {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #262626;

			.list-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 330rpx;
				height: 64rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
				margin-bottom: 24rpx;
			}
		}
	}

	.tu {
		margin-top: 24rpx;
		padding: 0 33rpx;
		background: #fff;

		.round {
			position: relative;
			height: 512rpx;
			box-sizing: border-box;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #e5e5e5;

			.info {
				position: absolute;

				.title {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: 20rpx;
					font-size: 24rpx;
					color: #999999;
				}

				.title2 {
					font-size: 24rpx;
					color: #262626;
					text-align: center;
				}

				.title3 {
					font-size: 20rpx;
					color: #262626;
					text-align: center;
				}

				.round-icon {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
				}
			}

			.info1 {
				top: 32rpx;
				left: 0;

				.round-icon {
					background: #20A10C;
				}

				.title2 {
					color: #20A10C;
				}
			}

			.info2 {
				top: 32rpx;
				right: 0;

				.round-icon {
					background: #E91205;
				}

				.title2 {
					color: #E91205;
				}
			}

			.info3 {
				bottom: 32rpx;
				left: 0;

				.round-icon {
					background: #08377D;
				}

				.title2 {
					color: #08377D;
				}
			}

			.info4 {
				bottom: 32rpx;
				right: 0;

				.round-icon {
					background: #FEA330;
				}

				.title2 {
					color: #FEA330;
				}
			}

			.round-center {
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -114rpx 0 0 -114rpx;
			}
		}

		.line-data {
			padding-bottom: 20rpx;

			.title {
				height: 82rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}
		}
	}

	.tips {
		margin-top: 24rpx;
		padding: 0 33rpx;
		font-size: 22rpx;
		color: #999999;
		line-height: 36rpx;
	}

	.action {
		height: 98rpx;
		margin-top: 24rpx;
		padding: 0 33rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			width: 48%;
			text-align: center;
			font-size: 20rpx;
			color: #999999;
			border-right: 1rpx solid #E5E5E5;

			.value1 {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #20A10C;
			}

			.value2 {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20rpx;
			}
		}

		.right {
			width: 48%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;

			.aciton-btn {
				width: 50%;
				font-size: 24rpx;
				color: #262626;
			}
		}
	}

	.selling {
		width: 100%;
		height: 529rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;

		.top {
			width: 100%;
			box-sizing: border-box;
			height: 79rpx;
			border-bottom: 1rpx solid #E5E5E5;
			padding: 0 33rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #999999;

			.left {
				gap: 40rpx;
			}
		}

		.number-wrapper {
			padding-top: 40rpx;
			padding-bottom: 20rpx;

			.input {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.left {
					width: 441px;
					height: 82rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
				}

				.right {
					width: 200px;

					.numberthis {
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}
				}
			}
		}

		.typenum {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.numinfo {
				width: 153rpx;
				height: 54rpx;
				line-height: 54rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				border: 1px solid #E5E5E4;
				text-align: center;
			}
		}

		.btn {
			width: 684rpx;
			height: 77rpx;
			line-height: 77rpx;
			text-align: center;
			color: #fff;
			background: #08377D;
			border-radius: 38rpx;
			margin: 20rpx auto;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.jiaoyi-action {
		width: 100%;
		height: 484rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;

		.title {
			width: 100%;
			height: 79rpx;
			line-height: 79rpx;
			box-sizing: border-box;
			padding: 0 33rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.action-type {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 50rpx 33rpx;
			box-sizing: border-box;

			.action-type-wrapper {
				text-align: center;
				font-size: 24rpx;
				color: #999999;

				.action-type-li {
					width: 138rpx;
					height: 138rpx;
					line-height: 138rpx;
					text-align: center;
					border-radius: 50%;
					font-weight: bold;
					font-size: 48rpx;
					color: #FFFFFF;
					margin-bottom: 10rpx;
				}

				.action-type-li1 {
					background-color: #EA0E00;
				}

				.action-type-li2 {
					background-color: #08377D;
				}

				.action-type-li3 {
					background-color: #999999;
				}

				.action-type-li4 {
					background-color: #FEA330;
				}
			}

		}

		.aciton-btn {
			width: 684rpx;
			height: 77rpx;
			line-height: 77rpx;
			margin: 0 auto;
			border-radius: 38rpx;
			border: 1px solid #EA0E00;
			font-weight: bold;
			font-size: 32rpx;
			color: #EA0E00;
			text-align: center;
		}
	}
</style>